<template>
  <div class="el-page el-main el-position">
    <div class="search-box" id="search-box">
      <div class="search-card">
        <div class="input-box">
          <div class="searchCard">
            <span class="searchText">生产队：</span>
            <el-select class="shadowInput" size="mini" clearable v-model="form.teamCode" placeholder="请选择生产队">
              <el-option v-for="item in teamList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="searchCard">
            <span class="searchText">补单类型：</span>
            <el-select class="shadowInput" size="mini" clearable v-model="form.orderType" placeholder="请选择状态">
              <el-option v-for="item in orderList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="searchCard">
            <span class="searchText">状态：</span>
            <el-select class="shadowInput" size="mini" clearable v-model="form.status" placeholder="请选择状态">
              <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="button-box">
          <el-button class="search" @click="getList">搜索</el-button>
          <el-button class="clear" @click="handleReset">清除</el-button>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="table-box">
      <TableCom ref="tableCom" :tableHead="tableHead" :tableData="tableData" :tableOperate="tableOperate"
        :showSelect="false">
      </TableCom>
    </div>
    <div class="page-box">
      <PageCom :page="pageData.current" :size="pageData.size" :total="total" @handleSize="handleSize"
        @handleCurrent="handleCurrent"></PageCom>
    </div>

    <TipPopu ref="TipPopu" :showDialog.sync="showDialog" @handleRefresh="getList"></TipPopu>
    <ViewDialog ref="ViewDialog" :showDialog.sync="showViewDialog"></ViewDialog>
  </div>
</template>

<script>
import { tableApi } from '@/api/orderMange'
import TipPopu from './dialog/TipsDialog'
import ViewDialog from './dialog/ViewDialog.vue'
import { selectApi } from '@/api/select'
import TableCom from '@/components/TableCom'
import PageCom from '@/components/PageCom'
export default {
  components: {
    TableCom,
    PageCom,
    TipPopu,
    ViewDialog
  },
  data() {
    return {
      form: {
        teamCode: '',
        orderType: '',
        status: '',
      },
      pageData: {
        current: 1,
        size: 10
      },
      total: 0,
      tableHead: [{
        title: '农场',
        prop: 'farmName'
      }, {
        title: '生产队',
        prop: 'teamName'
      }, {
        title: '补单原因',
        prop: 'orderWhy'
      }, {
        title: '补单类型',
        prop: 'orderType'
      }, {
        title: '状态',
        prop: 'status'
      }, {
        title: '申请时间',
        prop: 'createTime'
      }, {
        title: '更新时间',
        prop: 'updateTime'
      }],
      tableData: [],
      tableOperate: [{
        title: '审核',
        handle: (row) => {
          this.$refs.TipPopu.status = '2'
          this.$refs.TipPopu.id = row.id
          this.showDialog = true
        },
        flag(row) {
          if (row.status == '待审核') {
            return true
          } else {
            return false
          }
        },
      }, {
        title: '驳回',
        handle: (row) => {
          this.$refs.TipPopu.status = '4'
          this.$refs.TipPopu.id = row.id
          this.showDialog = true
        },
        flag(row) {
          if (row.status == '待审核') {
            return false
          } else {
            return false
          }
        },
      }, {
        title: '查看',
        handle: (row) => {
          this.$refs.ViewDialog.form = row
          this.showViewDialog = true
        },
        flag(row) {
          if (row.status != '待审核') {
            return true
          } else {
            return false
          }
        },
      }],
      orderList: [],
      teamList: [],
      statusList: [],
      showDialog: false,
      showViewDialog: false
    }
  },
  methods: {
    // 获取下拉框
    async handleGetSelect() {
      let res = await Promise.all([
        selectApi({ type: 'order_type' }),
        selectApi({ type: this.$farmCode }),
        selectApi({ type: 'order_status' }),
      ])
      this.orderList = res[0].data.dictItemList;
      if (this.$status != '0') {
        this.teamList = res[1].data.dictItemList;
      }
      this.statusList = res[2].data.dictItemList;
    },
    // 重置
    handleReset() {
      this.form = {
        teamCode: '',
        orderType: '',
        status: ''
      }
    },
    // 获取表格
    async getList() {
      const { data } = await tableApi(this.form, this.pageData)
      this.total = data.total
      this.tableData = data.records
    },
    // 分页
    handleSize(size) {
      this.pageData.current = 1
      this.pageData.size = size
      this.getList()
    },
    handleCurrent(current) {
      this.pageData.current = current
      this.getList()
    },
  },
  mounted() {
    this.handleGetSelect()
    this.getList()
  }
}
</script>

<style lang='scss' scoped>
.el-page {
  width: 100%;
  height: calc(100vh - 70px);

  .search-box {
    height: 40px;
    transition: height 0.3s ease;
    overflow: hidden;

    .search-card {
      width: 90%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;

      .arrow {
        cursor: pointer;
        display: inline-block;
        position: absolute;
        right: -100px;
        font-size: 30px;
        transition: transform 0.3s ease;
      }

      .arrow.down {
        transform: rotate(90deg);
      }
    }

    .input-box {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      transition: height 0.2s ease-in-out;
    }
  }

  .search-box-height {
    height: 90px;
  }

  .operate-box {
    width: 100%;
    background-color: #f5f7fa;
    padding: 8px 5px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

}
</style>
